<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all"/>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}"></script>
    <title>Title</title>
</head>


<body style="padding: 10px 20px 0px 20px;">
<input type="hidden" id="list" th:value="${list}">
<input type="hidden" id="id" th:value="${id}">
<input type="hidden" id="idx" name="idx" th:value="${idx}">
<input type="hidden" name="address">
<form class="layui-form" lay-filter="sectionForm">
    <input class="layui-input" autocomplete="off" type="text" placeholder="区域编号" name="id">
    <input class="layui-input" autocomplete="off" type="text" placeholder="区域名称" name="name">
    <div class="layui-form-item" id="area-picker">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
                <option value="">请选择省</option>
            </select>
        </div>
        <label class="layui-form-label">市</label>
        <div class="layui-input-inline">
            <select name="city" class="city-selector" data-value="" lay-filter="city-1">
                <option value="">请选择市</option>
            </select>
        </div>

        <label class="layui-form-label">区</label>
        <div class="layui-input-inline">
            <select name="county" class="county-selector" data-value="" lay-filter="county-1">
                <option value="">请选择区</option>
            </select>
        </div>
    </div>
    </div>
    <input type="submit" class="layui-btn layui-btn-sm">
</form>
<br>
<div style="height: 400px;overflow: auto;">
    <ul id="dataTree2" class="dtree" data-id="0"></ul>
</div>

<button style="float: right;" name="sure—btn" class="layui-btn">确定</button>
<link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}">
<link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}">
<script type="text/javascript" src="/lib/mods/layarea.js"></script>
<script th:inline="none">
    //配置插件目录
    layui.config({
        base: '/lib/mods/'
        , version: '1.0'

    });

    layui.extend({
        dtree: '{/}/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['form', 'dtree', 'layer', 'jquery', 'layarea'], function () {
        form = layui.form;
        var dtree = layui.dtree;
        form.render('select', 'test1');
        $ = layui.jquery;
        layarea = layui.layarea;

        var edit = "?strId=" + $('#list').val()
        console.log("edit: " + edit)

        var DTree = null;
        //区间选择
        DTree = dtree.render({
            elem: "#dataTree2",
            url: "/api/section/sectionData/" + $('#id').val() + edit,
            dataFormat: "list",  //配置data的风格为list
            checkbar: true //开启复选框

        });

        //地址的渲染
        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });
        console.log("父的index" + $("#idx").val());

        $("[name='sure—btn']").click(function () {
            var paramJsonArr = DTree.getCheckbarJsonArrParam();
            var selectId = paramJsonArr["nodeId"].join(",");
            var selectStr = paramJsonArr["context"].join(",");
            selectStr = selectStr.replace("全部,","");
            selectStr = selectStr.replace("001,","");

            console.log("selectId2--" + selectId);
            console.log("selectStr2--" + selectStr);

            //关闭当前弹出层
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            var body = parent.layer.getChildFrame('body', $("#idx").val());


            body.find("#dataRow").val(selectId);
            body.find("[name='str']").text(selectStr);
            //当你在iframe页面关闭自身时
            parent.layer.close(index);

        })


        //监听提交
        form.on('submit(sectionForm)', function (data) {

            var sectionData = data.field;
            //省市区模糊查询的数据拼接
            if (sectionData.province != null && sectionData.province != '' && sectionData.province != undefined) {
                sectionData.address = sectionData.province;
            }

            if (sectionData.city != null && sectionData.city != '' && sectionData.city != undefined) {
                sectionData.address = sectionData.address + "%" + sectionData.city;
            }

            if (sectionData.county != null && sectionData.county != '' && sectionData.county != undefined) {
                sectionData.address = sectionData.address + "%" + sectionData.county;
            }

            var index = top.layer.msg('数据提交中，请稍候', {
                icon: 16,
                time: false,
                shade: 0.8
            });

            $.post("/api/selectByCondition/", sectionData, function (d) {


                if (d.code == 200) {
                    top.layer.close(index);
                    top.layer.msg("员工添加成功！");
                    layer.closeAll("iframe");
                    //刷新父页面
                    parent.location.reload();
                } else {
                    layer.msg(d.msg, {"icon": 2});
                }
            });

            return false;
        });

    });
</script>

</body>
</html>
